<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            min-height: 200px;
            border: 2px dotted blue;
        }
    </style>
</head>

<body>
    <button>获取地理位置信息</button>
    <button>停止</button>
    <div></div>
    <script>
        var aBtn = document.querySelectorAll('button');
        var oDiv = document.querySelector('div');
        var myP = null;
        //给按钮绑定点击事件
        aBtn[0].onclick = function () {
            var str = "";
            //获取地理位置的函数 多次
            //三个参数 1:成功的回调函数，2：失败的回调函数，3，配置项json
            // 相当于 setInterval
            myP = navigator.geolocation.watchPosition((res) => {//成功
                console.log(res);//coords
                var data = res.coords;
                str += `纬度：${data.latitude} | 经度：${data.longitude} | 时间： ${res.timestamp}`;
                oDiv.innerHTML = str;

            }, (err) => {//失败
                console.log(err);
            }, {//配置
                enableHighAccuracy: false,//是否是高精度, true 高精度  false 不是高精度
                timeout: 2000,//获取地理位置定位的超时时间
                maximumAge: 2000 //浏览器重新获取地理位置定位的时长  ,多次获取地理位置定位
            });

        }

        //停止地理位置获取 ，类似于 clearInterval
        aBtn[1].onclick = function () {

            navigator.geolocation.clearWatch(myP);
        }


        //多次的地理位置获取,一般用于 移动端,移动端设备在移动的情况下

    </script>
</body>

</html>